<template>
	<view>

		<view class="bm-popup" v-if="shows" @touchmove.stop.prevent="moveHandle">
			<view class="bm-mask"  >

			</view>
			<view class="center">
				<view class=""
					style="width: 80%;background-color: #fff;border-radius: 10rpx;position:relative;z-index: 9090;">
					<view v-if="name" class="flex j-c a-c" style="padding: 20px;">
						<text class="w800">{{name}}</text>
					</view>
					<view @click="close" class="bm-close">
						<icon-close size="40" color="#333"></icon-close>
					</view>
					<slot></slot>
					<view class="bm-button">
						<view @click="close">
							<text style="font-size: 16px;color: #A9A9A9;">关闭</text>
						</view>
						<view @click="confirm">
							<text style="font-size: 16px;color: #1E90FF;">确认</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script type="text/javascript">
	export default {
		name: 'bm_input',
		props: {
			name: {
				type: String,
				default: '设置'
			},


		},

		data() {
			return {
				val: '',
				shows: false
			}
		},
		methods: {
			moveHandle(){
				
			},
			open() {
				this.shows = true;
			},
			confirm() {
				this.$emit('confirm')
			},
			close() {
			
				this.$emit('close')
				this.shows = false
			},

		}
	}
</script>
<style lang="scss">
	.bm-popup {
		position: fixed;
	 

		top: 0;
		left: 0;

		.center {
			position: fixed;
			display: flex;
			flexDirection: column;
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
			z-index: 999;
		 

			justify-content: center;
			align-items: center;

		}

	}

	.bm-button {
		display: flex;
		padding: 40rpx;
		justify-content: space-around;
	}

	.bm-close {
		position: absolute;
		right: 0px;
		top: 0;
		padding: 30rpx;
	}

	.bm-mask {
		position: fixed; 
		background-color: rgba(0, 0, 0, 0.5);
		width: 750rpx;
		height: 100vh;
		right: 0px;
		top: 0;
		
	}
</style>